<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="g" tagdir="/WEB-INF/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>musicMAP - Statistiques</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" title="style" />
    <link rel="alternate stylesheet" type="text/css" href="css/style_noir.css"title="style_noir" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.6.1");
    </script>
    <script type="text/javascript">
      google.load('visualization', '1', {'packages':['motionchart']});

      var options = {};
      options['state'] = '{"xAxisOption":"_TIME","showTrails":true};';
      options['showChartButtons'] = true;
      options['showAdvancedPanel'] = true;
      options['showSidePanel'] = false;
      options['showSelectListComponent'] = true;
      options['showXScalePicker'] = false;
      options['showYScalePicker'] = false;
      options['showYMetricPicker'] = false;
      options['showXMetricPicker'] = true;
      options['showHeader'] = true;
      options['width'] = 1200;
      options['height'] = 600;

      google.setOnLoadCallback(initialize);
      function initialize() {
        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Artiste');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Popularité');

        $.getJSON('init.html?action=getStatsByCity&idVille=${idVille}&groupe=<c:out value="${groupe}"/>', function(json) {
              $.each(json, function(key, val) {
                      try{data.addRow(['<c:out value="${groupe}"/>',new Date (val.semaine*1000), val.pop]);}catch(e){alert(e)};
                  });
              chart.draw(data,options);
        });

      }
    </script>


  <script type="text/javascript">
        function populariteSelect(choice) {
            var selectElmt = document.getElementById(choice);
            window.location.href = "init.html?action=getPopularite_stats&nomgroupe=" + selectElmt.options[selectElmt.selectedIndex].value;
        }

        function populariteInput(choice) {
            var selectElmt = document.getElementById(choice);
            window.location.href = "init.html?action=getPopularite_stats&nomgroupe=" + selectElmt.value;
        }

  </script>

	<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
</head>
<body>
	<div id="content">
		<p id="top"></p>
		<div id="logo">
			<h1><a href="index.html"></a></h1>
		</div>
		<g:navigation page="map"/>
		<div class="ligne"></div>
		<div>
                    <h1 class="titre" >
                        Statistiques de <c:out value="${groupe}"/> sur <c:out value="${ville}"/>.                    
                    </h1>

                    <c:if test="${total_popularite!=null}">
                        Popularité dans le monde:<c:out value="${total_popularite}"/>
                    </c:if>
                    <br><br><br>

		</div>

                <div id="chart_div"  style="width:1200px;height:900px;"></div>

		<div id="pied">
                    <%@include file="inc/pied.html" %>
		</div>
        </div>
</body>
</html>